<template>
  <div class="service">
    <div class="page-header">
      <div class="return" @click="$router.push('/index')">
        <img class="home" src="/images/icon/home.svg" alt="" />
        回到首页
      </div>
      <div class="title">{{ customTitle }}</div>
    </div>
    <div class="body">
      <div class="nav-list">
        <div
          class="nav"
          :style="handleBackground(index, service.name)"
          :class="{ active: activeServiceIndex === index }"
          v-for="(service, index) in serviceList"
          :key="service.id"
          @click="switchService(index)"
        >
          <!-- <img class="icon" src="/images/service/icon.svg" alt="" /> -->
          <img class="icon" :src="handleIcon(service.name)" alt="" />
          <div class="name">{{ service.name }}</div>
        </div>
      </div>
      <div class="body-content">
        <div class="aside">
          <div class="title">{{ currentService?.name || '服务列表' }}</div>
          <div class="service-list">
            <div class="item" v-for="(item, index) in serviceChildren" :key="item.id">
              <div
                class="parent"
                :class="{ active: activeChildId === item.id }"
                @click="toggleServiceItem(item, index)"
              >
                {{ item.name }}
                <img
                  v-if="item.type != 'CONTENT'"
                  class="arrow"
                  src="/images/map/arrow.svg"
                  alt=""
                  :class="{ expanded: item.open }"
                />
              </div>
              <div class="childs" v-if="item.open && item.children && item.children.length > 0">
                <div
                  class="child"
                  :class="{ active: activeChildId === child.id }"
                  v-for="child in item.children"
                  :key="child.id"
                  @click="selectService(child)"
                >
                  {{ child.name }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="detail">
          <div class="bread">
            <div class="item">{{ currentService?.name || '服务' }}</div>
            <img class="arrow" src="/images/service/arrow.svg" alt="" v-if="currentParent?.name" />
            <div class="item" v-if="currentParent?.name">{{ currentParent.name }}</div>
            <img class="arrow" src="/images/service/arrow.svg" alt="" v-if="serviceDetail.name" />
            <div class="item" v-if="serviceDetail.name">{{ serviceDetail.name }}</div>
          </div>
          <div class="detail-content" :style="{ fontSize: `${fontSize}%` }">
            <div class="top" v-if="serviceDetail.name">
              <div class="title">
                <img class="icon" :src="handleIcon(activeServiceIndex)" alt="" />
                {{ serviceDetail.name }}
              </div>
              <div class="tag-list">
                <div class="tag" v-if="serviceDetail.topParentName">
                  {{ serviceDetail.topParentName }}
                </div>
                <div class="tag" v-if="serviceDetail.parentName">
                  {{ serviceDetail.parentName }}
                </div>
              </div>
              <div class="font-buttons">
                <div class="button" @click="decreaseFontSize">减小字体</div>
                <div class="button" @click="increaseFontSize">增大字体</div>
              </div>
            </div>
            <div class="detail-body" v-if="serviceDetail.contentDetails">
              <div class="item" v-if="serviceDetail.contentDetails.serviceTarget">
                <div class="header">
                  <img src="/images/service/object.svg" alt="" />
                </div>
                <div class="content">
                  {{ serviceDetail.contentDetails.serviceTarget }}
                </div>
              </div>
              <div class="item" v-if="serviceDetail.contentDetails.policyStandard">
                <div class="header">
                  <img src="/images/service/policy.svg" alt="" />
                </div>
                <div class="content">
                  {{ serviceDetail.contentDetails.policyStandard }}
                </div>
              </div>
              <div class="item" v-if="serviceDetail.contentDetails.department">
                <div class="header">
                  <img src="/images/service/department.svg" alt="" />
                </div>
                <div class="content">
                  {{ serviceDetail.contentDetails.department }}
                </div>
              </div>
              <div class="item" v-if="serviceDetail.contentDetails.contact">
                <div class="header">
                  <img src="/images/service/contact.svg" alt="" />
                </div>
                <div class="content">
                  {{ serviceDetail.contentDetails.contact }}
                </div>
              </div>
              <div class="item footer">
                <div class="header">
                  <img src="/images/service/method.svg" alt="" />
                </div>
                <div class="content">
                  <div v-if="serviceDetail.contentDetails.handleLink">
                    网站链接：
                    <div class="link" @click="openURL(serviceDetail.contentDetails.handleLink)">
                      {{ serviceDetail.contentDetails.handleLink }}
                    </div>
                  </div>
                  <div class="code" v-if="serviceDetail.contentDetails.qrCode">
                    <img
                      class="code-img"
                      :src="handleProxy(serviceDetail.contentDetails.qrCode)"
                      alt="二维码"
                    />
                    <div class="code-text">扫描二维码查看更多</div>
                  </div>
                  <div class="attachment" v-if="serviceDetail.contentDetails.otherInfo">
                    <div class="attachment-content">
                      {{ serviceDetail.contentDetails.otherInfo }}
                    </div>
                  </div>
                  <div
                    v-if="
                      serviceDetail.contentDetails.miniProgramCode1 ||
                      serviceDetail.contentDetails.miniProgramCode2
                    "
                  >
                    <div class="tips">请通过手机微信进入小程序端登录后进行办理</div>
                    <div class="link">
                      {{ serviceDetail.contentDetails.miniProgramCode1 }}
                    </div>
                    <div class="link">
                      {{ serviceDetail.contentDetails.miniProgramCode2 }}
                    </div>
                  </div>
                  <!-- 附件列表 -->
                  <div class="attachment-list" v-if="attachmentList && attachmentList.length > 0">
                    <div class="attachment-title">相关附件</div>
                    <div
                      class="attachment-item"
                      v-for="(item, index) in attachmentList"
                      :key="index"
                    >
                      <!-- 如果是图片，只显示大尺寸缩略图，点击可预览 -->
                      <template v-if="isImageFile(item.name)">
                        <div class="attachment-image-preview-large">
                          <img
                            :src="handleProxy(item.url)"
                            class="attachment-thumbnail-large"
                            alt="附件图片"
                            @click="previewImage(item.url)"
                          />
                        </div>
                      </template>
                      <!-- 如果不是图片，显示文件图标和详细信息 -->
                      <template v-else>
                        <div class="attachment-icon">
                          <div class="file-icon" :class="getFileIconClass(item.name)">
                            {{ getFileExtension(item.name) }}
                          </div>
                        </div>
                        <div class="attachment-info">
                          <div class="attachment-name">{{ item.name }}</div>
                          <div class="attachment-size">{{ formatFileSize(item.size) }}</div>
                        </div>
                        <div class="attachment-actions">
                          <div
                            v-if="isSupportedPreviewFile(item.name)"
                            class="preview-btn"
                            @click="previewFile(item)"
                          >
                            在线预览
                          </div>
                          <div class="view-text">扫描小程序码进行查看</div>
                        </div>
                      </template>
                    </div>
                  </div>
                  <div
                    class="empty-box"
                    v-if="
                      !serviceDetail.contentDetails.handleLink &&
                      !serviceDetail.contentDetails.miniProgramCode1 &&
                      !serviceDetail.contentDetails.miniProgramCode2 &&
                      !serviceDetail.contentDetails.qrCode &&
                      !serviceDetail.contentDetails.otherInfo &&
                      (!attachmentList || attachmentList.length === 0)
                    "
                  >
                    <img class="empty" src="/images/icon/empty.svg" alt="" />
                  </div>
                </div>
              </div>
            </div>

            <div class="no-service" v-if="!serviceDetail.name">
              <img class="empty" src="/images/icon/empty.svg" alt="" />
              <div class="text">请选择左侧服务项目查看详情</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="service-button" @click="$router.push('/source')">
      <img class="icon" src="/images/icon/source.svg" alt="" />
      <img class="arrow" src="/images/icon/right-arrow.svg" alt="" />
    </div>
    <qrcode></qrcode>

    <!-- 文件预览组件 -->
    <FilePreview
      :visible="showPreview"
      :type="previewType"
      :url="previewUrl"
      :fileName="previewFileName"
      @close="closePreview"
      @retry="retryPreview"
    />
  </div>
</template>
<script setup>
import qrcode from '@/components/qrcode.vue'
import FilePreview from '@/components/FilePreview.vue'
import { onMounted, ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { getServiceList, getServiceDetail, handleProxy } from '@/api/data'
import { getCustomTitle } from '@/utils/customStorage.js'

// 响应式数据
const serviceDetail = ref({})
const serviceList = ref([])
const activeServiceIndex = ref(0)
const activeChildId = ref(null)
const customTitle = ref('椒江区人才社区地图')
const route = useRoute()
const fontSize = ref(100) // 字体大小百分比，默认100%

// 预览相关数据
const showPreview = ref(false)
const previewType = ref('') // 'image' 或 'file'
const previewUrl = ref('')
const previewFileName = ref('')
const openURL = (url) => {
  window.open(url, 'mozillaWindow', 'popup')
}

// 预览相关方法
const previewImage = (url) => {
  previewType.value = 'image'
  previewUrl.value = handleProxy(url)
  showPreview.value = true
}

const previewFile = (item) => {
  const fileUrl = handleProxy(item.url)
  const encodedUrl = encodeURIComponent(fileUrl)

  // 根据文件类型选择最合适的预览服务
  const ext = getFileExtension(item.name).toLowerCase()
  let previewService = ''

  if (['pdf'].includes(ext)) {
    // PDF 文件直接在浏览器中打开
    previewService = fileUrl
  } else if (['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes(ext)) {
    // Office 文件使用微软在线预览服务
    previewService = `https://view.officeapps.live.com/op/embed.aspx?src=${encodedUrl}`
  } else {
    return
  }

  previewType.value = 'file'
  previewUrl.value = previewService
  previewFileName.value = item.name
  showPreview.value = true
}

const closePreview = () => {
  showPreview.value = false
  previewType.value = ''
  previewUrl.value = ''
  previewFileName.value = ''
}

const retryPreview = () => {
  // 重新触发文件预览
  if (previewType.value === 'file') {
    showPreview.value = false
    setTimeout(() => {
      showPreview.value = true
    }, 100)
  }
}
// 计算属性
const currentService = computed(() => {
  return serviceList.value[activeServiceIndex.value] || null
})

const serviceChildren = computed(() => {
  return currentService.value?.children || []
})

const currentParent = computed(() => {
  if (!activeChildId.value) return null

  for (const parent of serviceChildren.value) {
    if (parent.children) {
      const child = parent.children.find((c) => c.id === activeChildId.value)
      if (child) return parent
    }
  }
  return null
})

const attachmentList = computed(() => {
  if (!serviceDetail.value.contentDetails?.attachments) return []
  try {
    return JSON.parse(serviceDetail.value.contentDetails.attachments)
  } catch {
    return []
  }
})

const handleIcon = (name) => {
  const icons = {
    我要就业: '/images/service/icon.svg',
    我要创业: '/images/service/icon1.svg',
    我要社保: '/images/service/icon2.svg',
    我要培训: '/images/service/icon3.svg',
    我要维权: '/images/service/icon4.svg',
    我是人才: '/images/service/icon5.svg',
  }
  return icons[name] || icons['我要就业'] // 默认使用第一个图标
}
const handleBackground = (index, name) => {
  if (activeServiceIndex.value != index) {
    return ''
  }
  const backgrounds = {
    我要就业: 'background: linear-gradient(90deg, #FFC266 33%, #FFA620 100%)',
    我要创业: 'background: linear-gradient(90deg, #FF9C66 33%, #FF8340 100%)',
    我要社保: 'background: linear-gradient(90deg, #44D4A8 33%, #28C68E 100%)',
    我要培训: 'background: linear-gradient(90deg, #30D4E6 33%, #2FBFD2 100%)',
    我是人才: 'background: linear-gradient(90deg, #58BCF6 33%, #31A6E9 100%)',
    我要维权: 'background: linear-gradient(90deg, #7AABF5 33%, #5291F0 100%)',
  }
  return backgrounds[name] || backgrounds['我要就业'] // 循环使用背景色
}
// 方法
const switchService = (index) => {
  activeServiceIndex.value = index
  activeChildId.value = null
  serviceDetail.value = {}

  // 初始化子项目的展开状态
  if (serviceChildren.value.length > 0) {
    serviceChildren.value.forEach((item) => {
      if (!item.hasOwnProperty('open')) {
        item.open = false
      }
    })
  }
}

// 处理URL参数，自动选择对应的服务
const handleUrlParams = () => {
  const serviceId = route.query.id
  const serviceName = route.query.name

  if (serviceId) {
    // 根据ID查找对应的服务
    const serviceIndex = serviceList.value.findIndex((service) => service.id == serviceId)
    if (serviceIndex !== -1) {
      switchService(serviceIndex)
      return
    }
  }

  if (serviceName) {
    // 根据名称查找对应的服务
    const serviceIndex = serviceList.value.findIndex(
      (service) => service.name.includes(serviceName) || serviceName.includes(service.name),
    )
    if (serviceIndex !== -1) {
      switchService(serviceIndex)
      return
    }
  }
}

// 自动展开并选择第一个服务项目
const autoSelectFirstService = () => {
  // 如果有数据，默认选择第一个服务并展开第一个子项
  if (
    serviceList.value.length > 0 &&
    serviceList.value[activeServiceIndex.value].children &&
    serviceList.value[activeServiceIndex.value].children.length > 0
  ) {
    serviceList.value[activeServiceIndex.value].children[0].open = true

    // 如果第一个子项有children，选择第一个
    if (
      serviceList.value[activeServiceIndex.value].children[0].children &&
      serviceList.value[activeServiceIndex.value].children[0].children.length > 0
    ) {
      const firstChild = serviceList.value[activeServiceIndex.value].children[0].children[0]
      activeChildId.value = firstChild.id
      getDetail(firstChild.id)
    } else if (serviceList.value[activeServiceIndex.value].children[0].type === 'CONTENT') {
      // 如果第一个子项就是内容项目，直接选择它
      const firstChild = serviceList.value[activeServiceIndex.value].children[0]
      activeChildId.value = firstChild.id
      getDetail(firstChild.id)
    }
  }
}

const toggleServiceItem = (item, index) => {
  if (item.type === 'CONTENT') {
    selectService(item)
  } else {
    const item = serviceChildren.value[index]
    if (item.children && item.children.length > 0) {
      item.open = !item.open
    }
  }
}

const selectService = (child) => {
  activeChildId.value = child.id
  getDetail(child.id)
}

const getDetail = (id) => {
  getServiceDetail(id)
    .then((res) => {
      serviceDetail.value = res.data.data || {}
    })
    .catch((err) => {
      console.error('获取服务详情失败:', err)
      serviceDetail.value = {}
    })
}

// 文件相关方法
const isImageFile = (filename) => {
  const imageExts = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp']
  const ext = filename.toLowerCase().substring(filename.lastIndexOf('.'))
  return imageExts.includes(ext)
}

// 检查文件是否支持在线预览
const isSupportedPreviewFile = (filename) => {
  const ext = getFileExtension(filename).toLowerCase()
  return ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes(ext)
}

const getFileExtension = (filename) => {
  const ext = filename.substring(filename.lastIndexOf('.') + 1)
  return ext.toUpperCase()
}

const getFileIconClass = (filename) => {
  const ext = getFileExtension(filename).toLowerCase()
  const iconMap = {
    pdf: 'pdf',
    doc: 'word',
    docx: 'word',
    xls: 'excel',
    xlsx: 'excel',
    ppt: 'powerpoint',
    pptx: 'powerpoint',
    txt: 'text',
    zip: 'archive',
    rar: 'archive',
  }
  return iconMap[ext] || 'file'
}

const formatFileSize = (size) => {
  if (!size) return '0B'
  const units = ['B', 'KB', 'MB', 'GB']
  let index = 0
  let fileSize = size

  while (fileSize >= 1024 && index < units.length - 1) {
    fileSize /= 1024
    index++
  }

  return `${fileSize.toFixed(1)}${units[index]}`
}

// 增大字体
const increaseFontSize = () => {
  fontSize.value += 15
}

// 减小字体
const decreaseFontSize = () => {
  if (fontSize.value > 70) {
    fontSize.value -= 15
  }
}

// 生命周期
onMounted(() => {
  // 获取自定义标题
  customTitle.value = getCustomTitle()

  getServiceList()
    .then((res) => {
      const data = res.data.data || []
      serviceList.value = data

      // 为每个服务项添加展开状态
      data.forEach((service) => {
        if (service.children) {
          service.children.forEach((child) => {
            child.open = false
          })
        }
      })

      // 处理URL参数，自动选择对应的服务
      handleUrlParams()

      // 自动展开并选择第一个服务项目
      autoSelectFirstService()
    })
    .catch((err) => {
      console.error('获取服务列表失败:', err)
    })
})
</script>
<style scoped lang="scss">
.service {
  width: 1920px;
  height: 100vh;
  background: #f4f9f8;
  overflow: hidden;
  position: relative;
  .body {
    padding: 48px;
    .nav-list {
      display: flex;
      align-items: center;
      border-radius: 16px;
      padding: 8px;
      background: linear-gradient(
        94.72deg,
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 0.75) 100%
      );
      border: 2px solid #ffffff;
      box-shadow: 0px 80px 80px 0px #13b7a414;
      .nav {
        width: 300px;
        height: 72px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        cursor: pointer;
        transition: all 0.3s ease;
        .icon {
          width: 44px;
          height: 44px;
          border-radius: 22px;
          object-fit: cover;
        }
        .name {
          font-family: PingFang SC;
          font-weight: 400;
          font-style: Regular;
          font-size: 20px;
          color: #646566;
        }
        &.active {
          .name {
            font-family: PingFang SC;
            font-weight: 500;
            font-style: Medium;
            font-size: 20px;
            color: #ffffff;
          }
        }
        &:hover:not(.active) {
          background: rgba(255, 255, 255, 0.5);
        }
      }
    }
    .body-content {
      margin-top: 24px;
      display: flex;
      align-items: center;
      gap: 24px;
      .aside {
        width: 320px;
        border-radius: 16px;
        padding-top: 24px;
        padding-right: 6px;
        padding-bottom: 16px;
        padding-left: 6px;
        background: linear-gradient(
          94.72deg,
          rgba(255, 255, 255, 0.25) 0%,
          rgba(255, 255, 255, 0.75) 100%
        );
        border: 2px solid #ffffff;
        box-shadow: 0px 80px 80px 0px #13b7a414;
        .title {
          font-family: PingFang SC;
          font-weight: 500;
          font-style: Medium;
          font-size: 16px;
          color: #323333;
          padding-left: 10px;
          position: relative;
          &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 16px;
            border-radius: 4px;
            background: linear-gradient(0deg, #44d4a8 0%, #30d1e6 100%);
          }
        }
        .service-list {
          display: flex;
          flex-direction: column;
          gap: 8px;
          margin-top: 16px;
          overflow-y: auto;
          height: 720px;
          padding: 10px;
          &::-webkit-scrollbar {
            width: 6px;
          }
          &::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 3px;
          }
          &::-webkit-scrollbar-track {
            background: transparent;
            border-radius: 16px;
          }
          .item {
            .parent {
              display: flex;
              align-items: center;
              width: 100%;
              height: 48px;
              line-height: 48px;
              border-radius: 8px;
              padding-right: 16px;
              padding-left: 16px;
              box-shadow: 0px 8px 16px 0px #13b7a41a;
              font-family: PingFang SC;
              font-weight: 500;
              font-style: Medium;
              font-size: 16px;
              color: #323333;
              background: #ffffff;
              cursor: pointer;
              transition: all 0.3s ease;

              &:hover {
                background: #f8f9fa;
              }

              .arrow {
                margin-left: auto;
                width: 12px;
                height: 12px;
                transform: rotate(180deg);
                transition: transform 0.3s ease;

                &.expanded {
                  transform: rotate(0deg);
                }
              }
              &.active {
                border: 1px solid #38d3c3;
                background: #38d3c31a;
                color: #323333;
              }
            }
            .childs {
              display: flex;
              flex-direction: column;
              margin-top: 8px;
              .child {
                min-height: 48px;
                border-radius: 6px;
                padding: 12px;
                font-family: PingFang SC;
                font-weight: 400;
                font-style: Regular;
                font-size: 16px;
                color: #646566;
                cursor: pointer;
                transition: all 0.3s ease;

                &:hover:not(.active) {
                  background: #f0f0f0;
                }

                &.active {
                  border: 1px solid #38d3c3;
                  background: #38d3c31a;
                  color: #323333;
                }
              }
            }
          }
        }
      }
      .detail {
        width: 1480px;
        height: 812px;
        border-radius: 16px;
        padding: 16px;
        background: url('/images/service/bg.png');
        .bread {
          padding: 10px;
          display: flex;
          align-items: center;
          gap: 2px;
          .arrow {
            width: 16px;
            height: 16px;
          }
          .item {
            font-family: PingFang SC;
            font-weight: 400;
            font-style: Regular;
            font-size: 14px;
            color: #00000066;
            &:last-child {
              font-family: PingFang SC;
              font-weight: 500;
              font-style: Medium;
              font-size: 14px;
              color: #323333;
            }
          }
        }
        .detail-content {
          width: 1448px;
          height: 758px;
          border-radius: 16px;
          border: 2px solid #ffffff;
          padding: 24px;
          background: #fff;
          overflow-y: auto;
          /* 为滚动条预留空间，避免溢出圆角 */
          padding-right: 4px;
          margin-right: -4px;
          &::-webkit-scrollbar {
            width: 6px;
          }
          &::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 3px;
            /* 减小滚动条滑块，留出空隙 */
            margin: 2px;
          }
          &::-webkit-scrollbar-track {
            background: transparent;
            border-radius: 16px;
            /* 轨道内缩，避免接触圆角边界 */
            margin: 8px 0;
          }
          &::-webkit-scrollbar-corner {
            background: transparent;
          }
          .top {
            position: relative;
            .font-buttons {
              position: absolute;
              right: 0;
              top: 0;
              display: flex;
              gap: 8px;
            }
            .button {
              padding: 8px 16px;
              border-radius: 6px;
              background: linear-gradient(90deg, #44d4a8 0%, #30d1e6 100%);
              font-family: PingFang SC;
              font-weight: 500;
              font-size: 14px;
              color: #ffffff;
              cursor: pointer;
              transition: all 0.3s ease;

              &:hover {
                opacity: 0.9;
                transform: translateY(-2px);
                box-shadow: 0px 4px 12px 0px rgba(56, 211, 195, 0.4);
              }

              &:active {
                transform: translateY(0);
              }
            }
            .title {
              display: flex;
              align-items: center;
              gap: 6px;
              font-family: PingFang SC;
              font-weight: 500;
              font-style: Medium;
              color: #323333;
              .icon {
                width: 32px;
                height: 32px;
              }
            }
            .tag-list {
              margin-top: 12px;
              display: flex;
              gap: 4px;
              .tag {
                padding: 0 8px;
                text-align: center;
                height: 28px;
                line-height: 28px;
                border-radius: 4px;
                background: #7aabf51a;
                font-family: PingFang SC;
                font-weight: 400;
                font-style: Regular;
                font-size: 14px;
                color: #5291f0;
                background: #7aabf51a;
                &:nth-child(1) {
                  color: #fff;
                  background: linear-gradient(90deg, #ffc266 33%, #ffa620 100%);
                }
              }
            }
          }
          .detail-body {
            margin-top: 32px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
            .item {
              position: relative;
              background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, #ffffff 50%);
              border-radius: 8px;
              padding-bottom: 12px;
              border: 1px solid #00000014;
              .header {
                position: absolute;
                width: 120px;
                height: 40px;
                left: 0;
                top: 0;
              }
              .content {
                padding: 44px 12px 12px 12px;
                font-family: PingFang SC;
                font-weight: 400;
                font-style: Regular;
                color: #333333;
              }
            }
          }
        }
      }
    }
  }
}
.service-button {
  cursor: pointer;
  position: absolute;
  z-index: 1002;
  right: 0px;
  top: 702px;
  transform: translateY(-50%);
  width: 80px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-width: 2px, 0px, 2px, 2px;
  border-style: solid;
  border-color: #ffffff54;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  background: linear-gradient(270deg, #44d4a8 0%, #30d1e6 100%);
  box-shadow: 0px 4px 8px 0px #38d3c340;

  .icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }

  .arrow {
    height: 16px;
    width: 16px;
  }
}

.empty-box {
  display: flex;
  .empty {
    width: 220px;
    height: 280px;
    margin: 0 auto;
  }
}
// 新增样式
.no-service {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  gap: 16px;

  .empty {
    width: 320px;
    height: 380px;
  }

  .text {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #969799;
  }
}

.attachment-list {
  margin-top: 16px;

  .attachment-title {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #323333;
    margin-bottom: 12px;
  }

  .attachment-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.3s ease;

    .attachment-icon {
      margin-right: 12px;

      .file-icon {
        width: 48px;
        height: 48px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 500;
        color: white;

        &.pdf {
          background: #ff4757;
        }
        &.word {
          background: #3742fa;
        }
        &.excel {
          background: #2ed573;
        }
        &.powerpoint {
          background: #ff6348;
        }
        &.text {
          background: #747d8c;
        }
        &.archive {
          background: #5f27cd;
        }
        &.file {
          background: #a4b0be;
        }
      }
    }

    .attachment-info {
      flex: 1;

      .attachment-name {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #323333;
        margin-bottom: 4px;
      }

      .attachment-size {
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #969799;
      }
    }

    .attachment-actions {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;

      .preview-btn {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #38d3c3;
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 4px;
        transition: all 0.3s ease;

        &:hover {
          background: #38d3c31a;
        }
      }

      .view-text {
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #969799;
      }
    }
  }
  .attachment-image-preview-large {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;

    .attachment-thumbnail-large {
      width: 100%;
      height: fit-content;
      object-fit: cover;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        transform: scale(1.02);
      }
    }
  }
}

.copy {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background: #e9ecef;
  }

  .icon {
    width: 16px;
    height: 16px;
  }

  .text {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #38d3c3;
  }
}

.link {
  color: #38d3c3 !important;
  cursor: pointer;
  text-decoration: underline;

  &:hover {
    color: #2bc1b1 !important;
  }
}

.tips {
  font-family: PingFang SC;
  font-weight: 400;
  color: #969799;
  margin-bottom: 8px;
}

.code {
  display: flex;
  flex-direction: column;
  align-items: center;

  .code-img {
    width: 220px;
    height: 220px;
    border-radius: 8px;
    cursor: pointer;
  }

  .code-text {
    font-family: PingFang SC;
    font-weight: 400;
    color: #969799;
    text-align: center;
    margin-bottom: 8px;
  }
}
</style>
